<script setup>
import $ from "jquery";
import { ref, onMounted, onUnmounted } from "vue";
import router from "@/router";
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/swiper-bundle.css';
import SwiperCore, { Navigation, Pagination, Autoplay } from 'swiper';



//swiper
// 配置Swiper的所有属性
const autoplay = {
  delay: 2500,
  disableOnInteraction: false
};

const autoplay1 = {
  delay: 5000,
  disableOnInteraction: false
};

const navigation = {
  nextEl: '.swiper-button-next',
  prevEl: '.swiper-button-prev'
};

const navigation1 = {
  nextEl: '.swiper-button-next1',
  prevEl: '.swiper-button-prev1'
};

const pagination = {
  clickable: true
};

const pagination1 = {
  clickable: true
};


// 安装Swiper插件
SwiperCore.use([Navigation, Pagination, Autoplay]);


onMounted(() => {
  $(function () {
    $("#hxzy").hide();
    $("#hxsz").hide();
    $("#gxxy").hide();
    //tabbar的显示状态

    $(".tabbar_title").on("mouseenter", "span", function () {
      $(this).addClass("active");
      $(this).siblings().removeClass("active");
      //公司简介
      var index = $(this).index();
      if (index == 0) {
        $("#gsjj").css("display", "block");
        $("#hxzy").hide();
        $("#hxsz").hide();
        $("#gxxy").hide();
      }
      if (index == 1) {
        $("#gsjj").css("display", "none");
        $("#hxzy").show();
        $("#hxsz").hide();
        $("#gxxy").hide();
      }
      if (index == 2) {
        $("#gsjj").css("display", "none");
        $("#hxzy").hide();
        $("#hxsz").show();
        $("#gxxy").hide();
      }
      if (index == 3) {
        $("#gsjj").hide();
        $("#hxzy").hide();
        $("#hxsz").hide();
        $("#gxxy").css("display", "block");
      }
    });
  });
});

//
const count = ref(1);
const count1 = ref(1);
const count2 = ref(15224);
onMounted(() => {
  const increment1 = () => {
    count.value++;
    if (count.value < 200) {
      setTimeout(increment1, 10); // 每隔100毫秒增加一次数值，直到达到100
    }
  };
  increment1(); // 启动特效
  const increment2 = () => {
    count1.value++;
    if (count1.value < 160) {
      setTimeout(increment2, 10); // 每隔100毫秒增加一次数值，直到达到100
    }
  };
  increment2(); // 启动特效

  const increment3 = () => {
    count2.value += 1302;
    if (count2.value < 260000) {
      setTimeout(increment3, 10); // 每隔100毫秒增加一次数值，直到达到100
    }
  };
  increment3(); // 启动特效
});

//滚动条的位置记录
const scrollContainer = ref(null);

const handleScroll = () => {
  if (window.scrollY >= 750) {
    // 当滚动条位置大于或等于1000像素时
    yourFunction(); // 调用你想要触发的函数
  }
};

const yourFunction = () => {
  $(".tabbar_info").animate(
    {
      left: "0",
    },
    500
  );

  $(".tabbar_img").animate(
    {
      left: "470px",
    },
    300
  );
};

onMounted(() => {
  window.addEventListener("scroll", handleScroll);
});

onUnmounted(() => {
  window.removeEventListener("scroll", handleScroll);
});
</script>

<template>
  <div class="container">
    <div class="header">
      <div class="logo">
        <img src="../assets/web/logo.png" />
      </div>
      <div>
        <router-link to="/login" class="login">登录</router-link>
        <a href="http://39.107.127.112:8080/ruoyi/" target="_blank">管理员入口</a>
      </div>
    </div>
    <div class="banner">
      <div class="banner_img">
        <swiper  :navigation="navigation" :pagination="pagination" :autoplay="autoplay" loop>
          <swiper-slide>
            <img src="../assets/web/banner1.png" />
          </swiper-slide>
          <swiper-slide>
            <img src="../assets/web/banner2.png" />
          </swiper-slide>
          <swiper-slide>
            <img src="../assets/web/banner3.png" />
          </swiper-slide>
          <swiper-slide>
            <img src="../assets/web/banner4.png" />
          </swiper-slide>
          <swiper-slide>
            <img src="../assets/web/banner5.png" />
          </swiper-slide>
        </swiper>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

 
      </div>

      <div class="banner_head">
        <div class="banner_info info_centent">
          <h6>{{ count }}+<span class="info_text">研发人员</span></h6>
          <span class="banner_content">课程紧跟企业岗位需求</span>
        </div>

        <div class="banner_info">
          <h6>{{ count1 }}+<span class="info_text">院校</span></h6>
          <span class="banner_content">遍布全国的学习网络，企业化教学管理模式</span>
        </div>

        <div class="banner_info clear_border">
          <h6>{{ count2 }}+<span class="info_text">就业学子</span></h6>
          <span class="banner_content">36年励精图治，26万学子的信赖选择</span>
        </div>
      </div>
    </div>

    <div class="title">
      <img src="../assets/web/head.png" />
    </div>

    <div class="tabbar">
      <div class="tabbar_title">
        <span class="active">华信简介</span>
        <span>华信专业</span>
        <span>华信师资</span>
        <span>明星学员</span>
      </div>
    </div>

    <div class="tabbar_content">
      <!--公司简介开始-->
      <div id="gsjj">
        <div class="tabbar_info">
          <p>
            华信智原（新华互联网科技高技能实训中心），总部设于北京中关村，隶属于中国东方教育集团（股票代码：00667.HK）是集软件开发、大数据应用及企业技术服务、高端人才培训、高等教育实训基地建设于一体的高新技术企业。华信智原在全国22个省市成立分子公司，多年来，培养了大量的信息技术人オ，得到了社会和业界的广泛好评。
          </p>
          <p>
            当前，数字技术与实体经济集成融合，产业数字化应用潜能迸发释放，在新模式新业态下，传统企业面临数字化转型。华信智原致力于数字经济人才培养，为企业数字化转型提供人才支撑。
          </p>
        </div>
        <div class="tabbar_img">
          <img src="../assets/web/lou.png" />
        </div>
      </div>
      <!--公司简介开始-->

      <!--华信专业开始-->
      <div id="hxzy">
        <div class="zyjs">
          <img src="../assets/web/hm.png" />
        </div>
        <div class="zyjs">
          <img src="../assets/web/uxd.png" />
        </div>
        <div class="zyjs">
          <img src="../assets/web/dsp.png" />
        </div>
      </div>
      <!--华信专业结束-->

      <!--华信师资开始-->

      <div id="hxsz">
        <swiper :autoplay="autoplay1"  :navigation="navigation1" :pagination="pagination1" class="swiper_teacher">

          <swiper-slide class="teacher_item">

            <div class="teacher_info">
              <div class="teacher_bj"></div>
              <div class="teacher_img">
                <img src="../assets/web/mhm.png" width="340" />
              </div>
              <div class="teacher_js"></div>
              <div class="teacher_txt">
                <h2>穆慧敏 / <span>Mu Huimin</span></h2>
                <h3>首席技术官</h3>
                <p>
                  6年项目实战经验、5年教学经验，曾担任北京某上市公司产品经理，参与美的多个线上线下开发项目，参与上海文物保护项目开发与设计，拥有丰富的项目实战经验。擅长产品定位、产品分析、用户定位分析、商业买点提炼研究。荣获高级产品设计师、高级UI设计师等行业认证。拥有独特教学方法，带领上千名小白学员成功高薪就业。
                </p>
              </div>
            </div>

            <div class="teacher_info">
              <div class="teacher_bj"></div>
              <div class="teacher_img">
                <img src="../assets/web/hhb.png" width="340" />
              </div>
              <div class="teacher_js"></div>
              <div class="teacher_txt">
                <h2>侯宏兵 / <span>Hou hongbing</span></h2>
                <h3>专家讲师</h3>
                <p>
                  20年项目实战经验、8年教学经验，曾任职中国人民革命军事博物馆设计处主管、盘古一号国际酒店企划部设计总监。参与中央档案馆文物陈列展设计、驻港奥60、70周年军事陈列展、钱学森纪念馆、中国政协荣誉展、水晶国际酒店品牌、北京丽驰会所品牌等数十余家品牌形象系统设计，对品牌设计有深入的研究。
                </p>
              </div>
            </div>

            <div class="teacher_info">
              <div class="teacher_bj"></div>
              <div class="teacher_img">
                <img src="../assets/web/hr.png" width="340" />
              </div>
              <div class="teacher_js"></div>
              <div class="teacher_txt">
                <h2>郝瑞 / <span>Hao rui</span></h2>
                <h3>专家讲师</h3>
                <p>
                  5年项目实战经验、4年教学经验，曾任广州某知名上市公司UI设计总监，参与广州监狱管理APP设计、内蒙古智慧煤炭大数据后台设计、自动化办公OA系统及APP设计、某大型社区团购系统设计等项目，并荣获四项“国家包装外观专利”。精通各大设计软件，对UXD设计有深刻的认识，拥有丰富的实战案例及授课经验。
                </p>
              </div>
            </div>

          </swiper-slide>


          <swiper-slide class="teacher_item">

            <div class="teacher_info">
              <div class="teacher_bj"></div>
              <div class="teacher_img">
                <img src="../assets/web/msj.png" width="340" />
              </div>
              <div class="teacher_js"></div>
              <div class="teacher_txt">
                <h2>孟淑君 / <span>Meng shujun</span></h2>
                <h3>首席技术官</h3>
                <p>
                  12年项目开发经验、10年教学经验，参与物联网智慧旅游系统、三甲医院His系统等20多个大中型项目的研发，主导研发的电子病历系统荣获北京市“实用新型专利奖”。擅长课程设计，精通JAVA生态体系框架，对HarmonyOS
                  Next应用开发有深入的研究。
                </p>
              </div>
            </div>

            <div class="teacher_info">
              <div class="teacher_bj"></div>
              <div class="teacher_img">
                <img src="../assets/web/spl.png" width="340" />
              </div>
              <div class="teacher_js"></div>
              <div class="teacher_txt">
                <h2>史鹏丽 / <span>Shi pengli</span></h2>
                <h3>专家讲师</h3>
                <p>
                  6年项目开发经验、5年教学经验，曾主导四川我要去哪儿科技有限公司代运营系统、国际票务系统、青海气象系统等多个大中型项目的研发。精通JAVA、MySQL、Oracle、JSP、Servlet等编程语言和数据库系统，对流行框架mybatis、Struts2、Hibernate、Spring、spring
                  mvc有深入的研究，所带学员就业薪资屡创新高。
                </p>
              </div>
            </div>

            <div class="teacher_info">
              <div class="teacher_bj"></div>
              <div class="teacher_img">
                <img src="../assets/web/gwl.png" width="340" />
              </div>
              <div class="teacher_js"></div>
              <div class="teacher_txt">
                <h2>巩文泷 / <span>Gun wenlong</span></h2>
                <h3>专家讲师</h3>
                <p>
                  10年电商项目经验、岛演传媒创始人，抖音个人品牌盈利顾问，擅长抖音爆品打造，抖店孵化商业定位、直播策划等，扶持新手主播以及商家自播学员5000＋，帮助2000+学员创业成功获得第一桶金，完成商业闭环。
                </p>
              </div>
            </div>

          </swiper-slide>

          <swiper-slide class="teacher_item">

            <div class="teacher_info">
              <div class="teacher_bj"></div>
              <div class="teacher_img">
                <img src="../assets/web/wy.png" width="340" />
              </div>
              <div class="teacher_js"></div>
              <div class="teacher_txt">
                <h2>王毅 / <span>Wang yi</span></h2>
                <h3>专家讲师</h3>
                <p>
                  10年项目实战经验、6年教学经验，曾在企业担任高级大数据开发工程师、高级大数据分析师、项目经理等重要职务。精通Python、JAVA等编程语言及大数据分析、机器学习等技术。参与交通厅智慧城市、华为云平台等多个大数据开发项目。
                </p>
              </div>
            </div>

            <div class="teacher_info">
              <div class="teacher_bj"></div>
              <div class="teacher_img">
                <img src="../assets/web/sr.png" width="340" />
              </div>
              <div class="teacher_js"></div>
              <div class="teacher_txt">
                <h2>申然 / <span>Shen ran</span></h2>
                <h3>高级讲师</h3>
                <p>
                  9年媒体运营实践经验、5年教学经验，曾任北京星成启点影视传媒公司后期修片师、沁园春文化产业公司影视总监等职。主导项目有全国越野拉力争霸赛纪录片并获得“赛事组最佳团队贡献奖”；参与54届国际小姐大赛北京总决赛形象设计2A-01区小组组长；参与院线电影《还魂之迷失曼谷》海报拍摄，担任公益系列片《圆梦记》摄制组组长。
                </p>
              </div>
            </div>

            <div class="teacher_info">
              <div class="teacher_bj"></div>
              <div class="teacher_img">
                <img src="../assets/web/zjj.png" width="340" />
              </div>
              <div class="teacher_js"></div>
              <div class="teacher_txt">
                <h2>张晶晶 / <span>Zhang jingjing</span></h2>
                <h3>高级讲师</h3>
                <p>
                  7年项目实战经验、4年教学经验，曾任广告公司设计总监，精通品牌设计与电商设计，参与过多行业相关的设计，对不同行业的设计风格有独到的见解。主导项目有山西齿科医院视觉设计、食指大动线上线下平面设计、小柒烤梨品牌设计、裕盛祥淘宝店及天猫旗舰店店铺装修、恒富源天猫店设计等。
                </p>
              </div>
            </div>

          </swiper-slide>

          <swiper-slide class="teacher_item">

            <div class="teacher_info">
              <div class="teacher_bj"></div>
              <div class="teacher_img">
                <img src="../assets/web/xjf.png" width="340" />
              </div>
              <div class="teacher_js"></div>
              <div class="teacher_txt">
                <h2>薛军芳 / <span>Xue junfang</span></h2>
                <h3>高级讲师</h3>
                <p>
                  6年项目实战经验、4年教学经验，曾参与手机银行、互联网金融、互联网家装等多种O2O产品研发，参与视频即时通讯项目的研发与优化、用户数据分析、竞品数据采集、风险预测等系统研发。喜欢研究新技术，挖掘底层原理，具有独特的授课技巧。
                </p>
              </div>
            </div>

            <div class="teacher_info">
              <div class="teacher_bj"></div>
              <div class="teacher_img">
                <img src="../assets/web/zjm.png" width="340" />
              </div>
              <div class="teacher_js"></div>
              <div class="teacher_txt">
                <h2>郑家梅 / <span>Zheng jiamei</span></h2>
                <h3>专家讲师</h3>
                <p>
                  7年项目实战经验、5年教学经验，曾任恒达医疗集团企划主管、宏大地产、双德地产策划总监，独立负责锦御堂陶瓷科技、凤池荷语花艺培训学校、翔淳科技、闻喜餐饮管理集团、意心酒店等企业的官网设计、品牌设计、微信公众号、H5推广设计，主持过多个大中型项目的策划推广和产品上线指导。
                </p>
              </div>
            </div>

            <div class="teacher_info">
              <div class="teacher_bj"></div>
              <div class="teacher_img">
                <img src="../assets/web/ryh.png" width="340" />
              </div>
              <div class="teacher_js"></div>
              <div class="teacher_txt">
                <h2>任永红 / <span>Ren yonghong</span></h2>
                <h3>高级讲师</h3>
                <p>
                  7年设计实战经验、6年教学经验，擅长Photoshop、lllustrator、Dimension、版式设计、字体设计、标志设计、包装设计、CIS/VIS。曾参与太原市威尔佳科技有限公司网站设计、山西精晟致远广告有限公司产品推广设计、天津市咖啡之翼品牌设计、天津市博学优贝幼儿园品牌设计项目。
                </p>
              </div>
            </div>

          </swiper-slide>

          <swiper-slide class="teacher_item">

            <div class="teacher_info">
              <div class="teacher_bj"></div>
              <div class="teacher_img">
                <img src="../assets/web/yxl.png" width="340" />
              </div>
              <div class="teacher_js"></div>
              <div class="teacher_txt">
                <h2>袁鑫亮 / <span>Yuan xinliang</span></h2>
                <h3>高级讲师</h3>
                <p>
                  8年项目实战经验、6年教学经验，曾担任开发技术总监。参与腾达集团 ARM
                  嵌入式项目开发，主导驱动开发与功能对接。独立开发黑马分销系统、家庭医生医疗系统、小程序商城系统、海外物流系统及客户关系系统等项目。擅长JavaWEB项目开发、C语言嵌入式开发、PHP后端开发，熟悉各种算法实现、数据结构实现、项目优化、数据库优化。
                </p>
              </div>
            </div>

            <div class="teacher_info">
              <div class="teacher_bj"></div>
              <div class="teacher_img">
                <img src="../assets/web/lpy.png" width="340" />
              </div>
              <div class="teacher_js"></div>
              <div class="teacher_txt">
                <h2>卢鹏宇 / <span>Lu pengyu</span></h2>
                <h3>高级讲师</h3>
                <p>
                  8年项目实战经验、6年教学经验，擅长前端开发，精通html5、css3、javascript、jQuery、PHP、redis编程开发、数据库操作、数据结构、操作系统等。曾参与花果山商城、爱宠小程序后台API开发、穷游网后台API开发、智库官网以及依竹留学等项目开发。
                </p>
              </div>
            </div>

            <div class="teacher_info">
              <div class="teacher_bj"></div>
              <div class="teacher_img">
                <img src="../assets/web/zyc.png" width="340" />
              </div>
              <div class="teacher_js"></div>
              <div class="teacher_txt">
                <h2>朱永春 / <span>Zhu yongchun</span></h2>
                <h3>高级讲师</h3>
                <p>
                  12年项目实战经验、7年教学经验，擅长HTML+CSS网页设计、javascript、jQuery、SQLSERVER、MySQL数据库、Windows操作系统下的DNS、DHCP、FTP、WEB等服务器。曾参与创办团购网站紫藤团、开发顺通驾校学员管理系统、山西福康斯发电机网站建设与部署、好享学APP的开发与部署等项目。
                </p>
              </div>
            </div>

          </swiper-slide>

        </swiper>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-pagination-bullet"></div>

      </div>
      <!--华信师资结束-->

      <!--明星学员开始-->
      <div id="gxxy">
        <img src="../assets/web/stu.png" />
      </div>
      <!--明星学员结束-->
    </div>

    <div class="footer">
      <div class="phone">
        <img src="../assets/web/ggy.png" width="711" height="33" />
        <img src="../assets/web/phone.png" width="400" height="33" />
      </div>
      <div class="line"></div>
      <div class="copy">版权所有 © 2024太原华信智原晋ICP备16009028号-1</div>
    </div>
  </div>
</template>


<style>

.swiper-button-prev:after {
  content: none;
}

.swiper-button-next:after {
  content: none;
}

.swiper-button-next {
  width: 62px;
  height: 62px;
  background-image: url(../assets/images/home/btn-next.png);
  background-size: 62px auto;
  margin-right: 30px;
}

.swiper-button-prev {
  width: 62px;
  height: 62px;
  background-image: url(../assets/images/home/btn-pre.png);
  background-size: 62px auto;
  margin-left: 30px;
}


.swiper-pagination-bullet {
  width: 15px;
  height: 15px;
  border-radius: 10px;
  background: #d1d1d1;
  opacity: 1;
}

 .swiper-pagination-bullet-active {
  width: 15px;
  height: 15px;
  border-radius: 10px;
  background: rgb(255, 53, 91);
}

.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal{
  bottom: 72px!important;
}



.swiper-image {
  width: 100%;
  height: 695px;
  object-fit: cover;
  /* 保持宽高比，不裁剪图片 */
}

.container {
  background-color: rgb(244, 247, 252);
}

.header {
  width: 1200px;
  height: 80px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header div a {
  color: #5c5959;
  text-decoration: none;
  margin-left: 30px;
  font-size: 18px;
}

.header div a:hover {
  color: rgb(192, 22, 49);
  text-decoration: underline;
}

.logo {
  width: 511px;
  height: 30px;
}

.logo:hover {
  cursor: pointer;
}

.banner {
  height: 800px;
  margin: 0 auto;
  position: relative;
}

.banner_img {
  max-width: 100%;
  height: 800px;
}

.banner_head {
  z-index: 2;
  width: 1200px;
  height: 155px;
  background: linear-gradient(to bottom, #ff3c61, #ee032a);
  box-shadow: 0px 0px 25px 0px rgba(4, 0, 0, 0.3);
  border-radius: 20px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -35%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner_info {
  border-right: 1px solid #fff;
  padding: 0 40px;
  color: #fff;
}

.banner_info h6 {
  vertical-align: middle;
  font-size: 56px;
  font-weight: bold;
  font-family: "微软雅黑";
}

.banner_info h6 span {
  font-size: 20px;
  font-weight: normal;
  font-family: "微软雅黑";
  vertical-align: middle;
}

.info_centent {
  text-align: left;
}

.clear_border {
  border: 0;
}

.banner_content {
  font-size: 16px;
  font-weight: normal;
  font-family: "微软雅黑";
  display: block;
}

.title {
  width: 1200px;
  margin: 190px auto 93px;
  text-align: center;
}

.tabbar {
  border-bottom: 1px solid rgb(222, 224, 229);
  height: 70px;
}

.tabbar_title {
  height: 70px;
  width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.tabbar_title span {
  height: 70px;
  font-size: 25px;
  width: 100px;
  text-align: center;
}

.tabbar_title span:hover {
  cursor: pointer;
}

.active {
  color: #e90a32;
  border-bottom: 1px solid #e90a32;
}

.tabbar_content {
  width: 1200px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

#gsjj {
  width: 1200px;
  height: 515px;
  margin: 120px auto;
  overflow: hidden;
}

.tabbar_info {
  position: absolute;
  left: -100%;
  /* 添加过渡动画 */
  width: 430px;
  height: 467px;
  border-bottom: 1px solid rgb(222, 224, 229);
  border-top: 1px solid rgb(222, 224, 229);
}

.tabbar_info p {
  padding-top: 32px;
  line-height: 34px;
  text-indent: 36px;
  font-size: 18px;
  font-family: "微软雅黑";
  color: #595656;
}

.tabbar_img {
  position: absolute;
  left: 1200px;
  top: 0;
  width: 730px;
  height: 467px;
  margin-top: 120px;
}

#hxzy {
  width: 1200px;
  height: 515px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 120px auto;
}

#hxzy .zyjs {
  width: 380px;
  height: 515px;
}

#hxzy img {
  width: 100%;
  border-radius: 30px;
}

#hxsz {
  width: 1200px;
  height: 755px;


}

.swiper_teacher {
  width: 1200px;
  height: 755px;
  align-items: center;
  display: flex;
}

.teacher_item {
  width: 1200px;
  overflow: hidden;
  display: flex;
}

.teacher_info {
  width: 383px;
  height: 605px;
  position: relative;
  cursor: pointer;
  margin-right: 26px;
}

.teacher_info:hover .teacher_js {
  display: block;
}

.teacher_info:hover .teacher_txt {
  display: block;
}

.teacher_bj {
  margin-top: 80px;
  width: 381px;
  height: 525px;
  background: #ffffff;
  box-shadow: 0px 0px 25px 0px rgba(4, 0, 0, 0.05);
  border-radius: 20px;
}

.teacher_img {
  position: absolute;
  left: 20px;
  bottom: -4px;
}

.teacher_js {
  width: 350px;
  height: 337px;
  background: linear-gradient(0deg, #ff3c61 0%, #ff0030 100%);
  box-shadow: 0px 0px 25px 0px rgba(4, 0, 0, 0.05);
  border-radius: 16px;
  opacity: 0.8;
  position: absolute;
  left: 15px;
  bottom: 0px;
  color: #fff;
  display: none;
}

.teacher_txt {
  display: none;
  width: 350px;
  height: 337px;
  border-radius: 16px;
  position: absolute;
  left: 15px;
  bottom: 5px;
  color: #fff;
}

.teacher_txt h2 {
  margin-top: 28px;
  font-size: 34px;
  padding-left: 30px;
  font-weight: normal;
}

.teacher_txt h2 span {
  font-size: 16px;

}

.teacher_txt h3 {
  margin-top: 10px;
  font-size: 28px;
  padding-left: 30px;
  font-weight: normal;
}

.teacher_txt p {
  padding: 15px 25px 15px 30px;
  font-size: 14px;
  line-height: 24px;
}

#gxxy {
  width: 1200px;
  height: 755px;
  text-align: center;
}

#gxxy img {
  margin-top: 60px;
}

.footer {
  height: 179px;
  background: linear-gradient(0deg, #ff3c61 0%, #f21136 100%);
}

.phone {
  width: 1200px;
  margin: 0 auto;
  height: 90px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.line {
  border-top: 1px solid rgba(248, 248, 248, 0.3);
}

.copy {
  width: 1200px;
  font-size: 14px;
  width: 1200px;
  height: 89px;
  line-height: 89px;
  text-align: center;
  color: #fff;
  margin: 0 auto;
}
</style>